<template>
	<div>
		<el-table
			border
			size="mini"
			:data="newTableData"
			style="width: 100%"
			:header-cell-style="getRowClass"
			highlight-current-row
			:span-method="objectSpanMethod"
		>
			<el-table-column
				align="center"
				prop="orderNo"
				label="注单号"
				show-overflow-tooltip
				min-width="200"
			>
				<template slot-scope="scope">
					<el-link
						v-if="scope.row.orderNo"
						class="underline"
						type="primary"
						@click="handleBetDetail(scope.row, scope.$index)"
					>
						{{ scope.row.orderNo }}
					</el-link>
					<span v-else>-</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				prop="netAt"
				label="结算时间"
				show-overflow-tooltip
				min-width="180"
			>
				<template slot-scope="scope">
					{{ scope.row.netAt || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				prop="obSettleCount"
				label="结算次数"
				show-overflow-tooltip
				min-width="100"
			>
				<template slot-scope="scope">
					{{
						scope.row.obSettleCount
							? `第${scope.row.obSettleCount}次结算`
							: '-'
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				prop="obBetStatus"
				label="注单状态"
				show-overflow-tooltip
				min-width="100"
			>
				<template slot-scope="scope">
					<span v-if="scope.row.obBetStatus == 1" class="success">
						已结算
					</span>
					<span v-else-if="scope.row.obBetStatus == 2" class="error">
						已取消
					</span>
					<span v-else>-</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				prop="betAmount"
				label="投注金额"
				show-overflow-tooltip
				min-width="200"
			>
				<template slot-scope="scope">
					{{ handleNumber(scope.row.currency, scope.row.betAmount) }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				prop="validBetAmount"
				label="有效投注"
				show-overflow-tooltip
				min-width="200"
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.validBetAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				prop="netAmount"
				label="游戏输赢"
				show-overflow-tooltip
				min-width="200"
			>
				<template slot-scope="scope">
					<span :style="handleNumberColor(scope.row.netAmount)">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.netAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				prop="name"
				show-overflow-tooltip
				min-width="200"
			>
				<span slot="header">
					有效投注
					<br />
					重算调整
				</span>
				<template slot-scope="scope">
					<span
						:style="
							handleNumberColor(scope.row.validBetAmountRecal)
						"
					>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.validBetAmountRecal
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				prop="name"
				show-overflow-tooltip
				min-width="200"
			>
				<span slot="header">
					会员
					<br />
					返水比例
				</span>
				<template slot-scope="scope">
					<span>{{ scope.row.rebateRate }}%</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				prop="name"
				show-overflow-tooltip
				min-width="200"
			>
				<span slot="header">
					会员返水
					<br />
					重算调整
				</span>
				<template slot-scope="scope">
					<span
						:style="
							handleNumberColor(
								scope.row.rebateAmountRecalculateAdjust
							)
						"
					>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.rebateAmountRecalculateAdjust
							)
						}}
					</span>
				</template>
			</el-table-column>
			<!-- <el-table-column
			align="center"
			prop="changeTime"
			label="账变时间"
			show-overflow-tooltip
			min-width="200"
		>
			<template slot-scope="scope">
				{{ scope.row.changeTime || '-' }}
			</template>
		</el-table-column> -->
		</el-table>

		<BetDetail
			v-if="showBetDetailDialog"
			:visible.sync="showBetDetailDialog"
			:tableData="tableData"
			:lookMsgList="lookMsgList"
			:curIdx="curIdx"
		/>
	</div>
</template>

<script>
import list from '@/mixins/list'
import BetDetail from './betDetail.vue'
export default {
  components: {
    BetDetail
  },
  mixins: [list],
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      spanArr: [],
      lookMsgList: {},
      curIdx: 0,
      showBetDetailDialog: false
    }
  },
  computed: {
    newTableData() {
      return this.tableData.map((item, index) => {
        if (index === 0) {
          item.validBetAmountRecal = null
          item.rebateAmountRecalculateAdjust = null
        }
        return item
      })
    }
  },
  created() {
    this.getSpanArr(this.tableData)
  },
  methods: {
    handleBetDetail(val, index) {
      this.lookMsgList = val
      this.curIdx = index
      this.showBetDetailDialog = true
    },
    /**
     * @description 👇合并行的计算方法
     * @param {array} data 数据列表
     */
    getSpanArr(data) {
      this.spanArr = [] // tip: 后台获取完成数据后，一定要重置spanArr=[],避免出现合并混乱！！！！！
      for (let i = 0; i < data.length; i++) {
        // 当为第一行时
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          // 判断当前值是否与上一行的【名称】相等，相等则进行合并
          if (data[i].orderNo === data[i - 1].orderNo) {
            this.spanArr[this.pos] += 1 // 合并单元格：合并的行数 +1
            this.spanArr.push(0) // 0代表单元格是不需要显示, 已经被合并的单元格
          } else {
            this.spanArr.push(1) // 1代表当前这行的数据需要被显示
            this.pos = i
          }
        }
      }
    },
    // 👇合并列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 用于设置要合并的列(这里是指第一列合并)
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex] // 合并行数
        const _col = this.spanArr[rowIndex] > 0 ? 1 : 0 // 合并的列数
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
